<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">

    </div>

    <template id="one">
        <!-- 使用 component 动态组件标签，通过is属性来切换需要显示的组件-->
        <component :is="c1">
            <h1>我是动态组件1</h1>
        </component>
        <!-- <component :is="c2">
            <h2>我是动态组件2</h2>
        </component> -->
        <hr>
        <button @click="changecom">更换组件</button>
    </template>

    <!-- 组件1 -->
    <template id="two">
        数据是否改动{{num}}
        <div>哈哈哈哈啊啊哈哈哈</div>
        <button @click="twoClick">观看数据变更</button>
    </template>
    <!--组件2 -->
    <template id="three">
        <div>
            嘿嘿嘿嘿嘿嘿噢噢噢
        </div>
    </template>
</body>
<script>
    const twoConfig = {
        template: '#two',
        data(){
            return{
                num:0
            }
        },
        //每次替换组件后，都是初始化开始，说明没有缓存数据。
        methods:{
            twoClick(){
                this.num = this.num + 1;
            }
        },
        beforeCreate() {console.log('two-beforeCreate');},
        created() {console.log('two-created');},
        beforeMount() {console.log('two-beforeMount');},
        mounted() {console.log('two-mounted');},
        beforeUpdate() {console.log('two-beforeUpdate');},
        updated() {console.log('two-updated');},
        beforeUnmount() {console.log('two-beforeUnmount');},
        unmounted() {console.log('two-unmounted');}
    }

    const threeConfig = {
        template: '#three',
        beforeCreate() {console.log('three-beforeCreate');},
        created() {console.log('three-created');},
        beforeMount() {console.log('three-beforeMount');},
        mounted() {console.log('three-mounted');},
        beforeUpdate() {console.log('three-beforeUpdate');},
        updated() {console.log('three-updated');},
        beforeUnmount() {console.log('three-beforeUnmount');},
        unmounted() {console.log('three-unmounted');}
    }

    const HelloVueApp = {
        template: '#one',
        beforeCreate() {console.log('beforeCreate');},
        created() {console.log('created');},
        beforeMount() {console.log('beforeMount');},
        mounted() {console.log('mounted');},
        beforeUpdate() {console.log('beforeUpdate');},
        updated() {console.log('updated');},
        beforeUnmount() {console.log('beforeUnmount');},
        unmounted() {console.log('unmounted');},
        data() {
            return {
                'c1': 'two'
            }
        },
        components: {
            'two': twoConfig,
            'three': threeConfig,
        },
        methods: {
            changecom() {
                this.c1 = this.c1 == 'two' ? 'three' : 'two';
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>